<div class="favorite-wrap" id="brandWrap">
    <div class="favorite-wrap__inner" id="favoriteBrand">

    </div>
    <div class="wrap-footer">
        <div class="wrap-footer-label" id="brandViewMore"><span>View More</span></div>
    </div>
</div>

<script type="module">
    import {collectAction, getGridList} from "/static/js/common.js";

    const brandWrap = document.getElementById('brandWrap')
    const brandParams = {
        pageSize: 12,
        page: 1
    }

    init()
    function init(){
        getBrandList()
        initBrandView()
    }

    function initBrandView() {
        const viewMoreEle = document.getElementById('brandViewMore')
        viewMoreEle.addEventListener('click', throttle(() => {
            brandParams.page ++
            getBrandList()
        },1000))
    }

    function getBrandList() {
        const footer = brandWrap.querySelector('.wrap-footer-label')
        getGridList({
            loadingElement: brandWrap,
            url: '/ins/fa/brand',
            params: brandParams,
            listWrap: brandWrap.querySelector('.favorite-wrap__inner'),
            footerElement: footer,
            listDomFunc: item => {
                let str = ''
                str += '<a href="/instagram/brand/' + item.name + '">' +
                    '<div class="favorite-item">' +
                    '<div class="top">' +
                    '<div class="avatar">' +
                    '<img class="img-avatar" src="'+ getImage(item.logo,IMAGE_TYPE.MEDIA,IMAGE_SIZE.SMALL) +'" alt="'+ item.id +'">' +
                    '</div>' +
                    '<div class="user-info">' +
                    '<div class="title">' +
                    '<div class="title__inner">'+ item.name +'</div>' +
                    '</div>' +
                    '<div class="sub-title">'
                if (item.category) {
                    str += '<div class="category">' + item.category + '</div>'
                }
                str += '</div>' +
                    '</div>' +
                    '<div class="gd-popover"'
                if (!gugeeGobal.isMobile) {
                    str += ' content="Remove from Favorite"'
                }
                str += '>' +
                    '<div class="favorite-icon" data-id="' + item.id + '" data-fid="' + item.fid + '">' +
                    '<i class="iconfont iconquxiaoshoucang33"></i>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '<div class="bottom">' +
                    '<div class="data-item">' +
                    '<div class="label">Post</div>' +
                    '<div class="num">' + numFormat(+item.posts) + '</div>' +
                    '</div>' +
                    '<div class="data-item">' +
                    '<div class="label">Likes</div>' +
                    '<div class="num">' + numFormat(+item.likes) + '</div>' +
                    '</div>' +
                    '<div class="data-item">' +
                    '<div class="label">Reviews</div>' +
                    '<div class="num">' + numFormat(+item.reviews) + '</div>' +
                    '</div>' +
                    '<div class="data-item">' +
                    '<div class="label">Engagements</div>' +
                    '<div class="num">' + numFormat(+item.engagements) + '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</a>'
                return str
            },
            otherEvent: () => {
                initPopover()
                brandWrap.querySelectorAll('.favorite-icon').forEach(item => {
                    item.addEventListener('click', e => {
                        e.preventDefault()
                        collectAction({
                            element: item,
                            url: '/ins/fa/brand',
                            collectKey: 'bid'
                        })
                    })
                })
            }
        })
    }

</script>